<!-- 关联规则里面的数据集 -->
<template>
    <div>
        <div class="body">
            <el-table :data="jsonData" style="width: 100%">
                <el-table-column prop="id" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="num" label="学号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column prop="score1" label="评分1"> </el-table-column>
                <el-table-column prop="score2" label="评分2"> </el-table-column>
                <el-table-column prop="score3" label="评分3"> </el-table-column>
                <el-table-column prop="group" label="组名"> </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                layout="prev, pager, next"
                :total="totalNum"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";
export default {
    name: "Exp1DataSet",
    components: {
        JsonViewer,
    },
    data() {
        return {
            jsonData: [], //数据集
            curNum: 1,
            totalNum: 0,
            allData:[]
        };
    },
    async created() {
        let { data } = await this.$http.get("/one/pretreatment/dataset");
        this.totalNum = Object.keys(data).length;
        data = Object.keys(data).map((item) => {
            return {
                id: item,
                num: data[item][0],
                name: data[item][1],
                score1: data[item][2],
                score2: data[item][3],
                score3: data[item][4],
                group: data[item][5],
            };
        });
        this.allData = data;

        let leftIndex = (this.curNum - 1) * 10;
        let rightIndex = this.curNum * 10;

        let resData = [];
        for (let i = leftIndex; i < data.length && i < rightIndex; i++) {
            resData.push(data[i]);
        }
        this.jsonData = resData;
    },

    methods: {
        handleCurrentChange(val) {
            
            this.curNum = parseInt(val);
            let leftIndex = (this.curNum - 1) * 10;
            let rightIndex = this.curNum * 10;

            let resData = [];
            for (let i = leftIndex; i < this.allData.length && i < rightIndex; i++) {
                resData.push(this.allData[i]);
            }
            this.jsonData = resData;
        },
    },
};
</script>

<style  scoped>
.pagination {
    text-align: right;
}
</style>
